<template>
	<a-modal v-model:visible="modelVisible" title="编辑用户" @before-ok="submitData" @cancel="handleCancel" draggable>
		<a-form ref="ruleFormRef" :model="submitForm" layout="vertical" auto-label-width>
			<a-form-item>
				<a-upload
					:custom-request="customRequest"
					ref="uploadRef"
					style="margin: 0 auto"
					:fileList="selectedFile ? [selectedFile] : []"
					:show-file-list="false"
					:multiple="false"
				>
					<template #upload-button>
						<div :class="`arco-upload-list-item${paramsCache.avatar ? ' arco-upload-list-item-error' : ''}`">
							<div class="arco-upload-list-picture custom-upload-avatar" v-if="paramsCache.avatar">
								<img :src="selectedFile.url" />
								<div class="arco-upload-list-picture-mask">
									<IconEdit />
								</div>
							</div>
							<div class="arco-upload-picture-card" v-else>
								<div class="arco-upload-picture-card-text">
									<IconPlus />
									<div style="margin-top: 10px; font-weight: 600">Upload</div>
								</div>
							</div>
						</div>
					</template>
				</a-upload>
			</a-form-item>
			<a-form-item field="userName" label="用户名" validate-trigger="input" :rules="[{ required: true, message: '用户名不能为空' }]">
				<a-input v-model="submitForm.userName" placeholder="请输入用户名" />
			</a-form-item>
			<a-form-item field="realName" label="真实姓名" validate-trigger="input" :rules="[{ required: true, message: '真实姓名不能为空' }]">
				<a-input v-model="submitForm.realName" placeholder="请输入真实姓名" />
			</a-form-item>
			<a-form-item field="emailAddress" label="电子邮件" validate-trigger="input" :rules="[{ required: true, message: '电子邮件不能为空' }]">
				<a-input v-model="submitForm.emailAddress" placeholder="请输入电子邮件地址" />
			</a-form-item>
			<a-form-item field="phoneNumber" label="电话号码" validate-trigger="input" :rules="[{ required: true, message: '电话号码不能为空' }]">
				<a-input v-model="submitForm.phoneNumber" placeholder="请输入电话号码" />
			</a-form-item>
			<a-form-item field="isEnabled" label="用户状态" :rules="[{ required: true, message: '请选择用户状态' }]">
				<a-radio-group v-model="submitForm.isEnabled">
					<a-radio :value="1">启用</a-radio>
					<a-radio :value="0">禁用</a-radio>
				</a-radio-group>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script setup lang="ts">
// drawer框状态
import { reactive, ref } from 'vue';
import { User } from '@/api/types';
import { formValidate } from '@/utils';
import { GlobalStore } from '@/stores/global';
import { FileItem, RequestOption } from '@arco-design/web-vue';
import { Notification } from '@arco-design/web-vue';
import { updateUserInfo, uploadAvatar } from '@/api/user';
import { ResultEnum } from '@/enums/httpEnum';
const globalStore = GlobalStore();

const modelVisible = ref(false);

const paramsCache = reactive({ avatar: '', emailAddress: '', id: 0, isEnabled: '', phoneNumber: '', realName: '', userName: '' });

const ruleFormRef = ref();

interface ModelProps {
	visible: boolean;
	rowData?: User.SysUser;
}
interface ModelEmits {
	(e: 'refreshTable'): void;
}

const emit = defineEmits<ModelEmits>();

// 接收父组件传过来的参数
const acceptParams = (params: ModelProps): void => {
	ruleFormRef.value.resetFields();
	Object.assign(submitForm, params.rowData);
	Object.assign(paramsCache, params.rowData);
	selectedFile.value.url = params.rowData?.avatar;

	modelVisible.value = params.visible;
};

const submitForm = reactive({
	avatar: '',
	emailAddress: '',
	id: 0,
	isEnabled: '',
	phoneNumber: '',
	realName: '',
	userName: '',
});

const submitData = (done: any) => {
	ruleFormRef.value.validate().then(async (res) => {
		if (formValidate(res)) {
			await updateUserInfo(submitForm);
			Notification.success('修改成功');
			done();
			emit('refreshTable');
		} else {
			done(false);
		}
	});
};

const selectedFile = ref<FileItem>({
	uid: '',
	url: '',
});

const customRequest = (options: any) => {
	const { onProgress, onError, onSuccess, fileItem } = options;
	const formData = new FormData();
	formData.append('file', fileItem.file);
	uploadAvatar(formData).then((res) => {
		if (res.code === ResultEnum.SUCCESS) {
			selectedFile.value = fileItem;
			submitForm.avatar = String(res.body);
			paramsCache.avatar = String(res.body);
			Notification.success('上传成功');
			onSuccess();
		} else {
			Notification.error('上传失败');
			onError();
		}
	});
};

const handleCancel = () => {
	Object.assign(submitForm, paramsCache);
};

defineExpose({
	acceptParams,
});
</script>

<style scoped lang="less"></style>
